<script setup>
import { useChatStore } from '@/stores/chatStore'
import { ElMessage, ElButton, ElAvatar, ElEmpty } from 'element-plus'
import websocket from '@/utils/websocket'
import { ref } from 'vue'

const chatStore = useChatStore()
const loading = ref(false)

const handleAgree = async (item) => {
  loading.value = true
  try {
    websocket.sendMessage({
      type: 'person-apply-agree',
      data: { id: item.id }
    })
    ElMessage.success('已同意')
    chatStore.getNoticeList && chatStore.getNoticeList()
  } finally {
    loading.value = false
  }
}

const handleReject = async (item) => {
  loading.value = true
  try {
    await request.post('notice/reject', {
      id: item.id,
      senderName: chatStore.loginUserInfo.username,
      senderAvatar: chatStore.loginUserInfo.avatar
    })
    ElMessage.success('已拒绝')
    chatStore.getNoticeList && chatStore.getNoticeList()
  } finally {
    loading.value = false
  }
}

const handleDelete = async (item) => {
  loading.value = true
  try {
    await request.post('notice/delete', { id: item.id })
    ElMessage.success('已删除')
    chatStore.getNoticeList && chatStore.getNoticeList()
  } finally {
    loading.value = false
  }
}

const handleRead = async (item) => {
  loading.value = true
  try {
    await request.post('notice/readById', { id: item.id })
    chatStore.getNoticeList && chatStore.getNoticeList()
  } finally {
    loading.value = false
  }
}

function getUserAvatar(item) {
  try {
    const info = JSON.parse(item.information)
    return info.senderAvatar || ''
  } catch {
    return ''
  }
}
function showDetail(item) {
  try {
    const info = JSON.parse(item.information)
    if (item.type === 'person-apply') return '验证信息: ' + info.applyMessage
    if (item.type === 'reject') return '拒绝消息(来自: ' + info.senderName + ')'
    return ''
  } catch {
    return ''
  }
}
</script>

<template>
  <div>
    <div v-if="chatStore.noticeList.length > 0" class="font-bold mb-2">全部通知消息</div>
    <div v-if="chatStore.noticeList.length > 0">
      <div v-for="item in chatStore.noticeList" :key="item.id" class="flex items-center border-b py-3 relative">
        <ElAvatar :src="getUserAvatar(item)" size="large" class="mr-4" />
        <div class="flex-1">
          <div>{{ showDetail(item) }}</div>
          <div class="text-xs text-gray-400 mt-1">{{ item.createTime }}</div>
        </div>
        <div class="flex gap-2">
          <ElButton v-if="!item.isRead && item.type === 'reject'" size="small" @click="handleRead(item)">已读</ElButton>
          <ElButton v-if="item.isRead" size="small" type="danger" @click="handleDelete(item)">删除</ElButton>
          <ElButton v-if="!item.isRead && item.type !== 'reject'" size="small" type="primary" @click="handleAgree(item)">同意</ElButton>
          <ElButton v-if="!item.isRead && item.type !== 'reject'" size="small" type="warning" @click="handleReject(item)">拒绝</ElButton>
        </div>
      </div>
    </div>
    <ElEmpty v-else description="暂无系统通知" />
  </div>
</template> 